<!DOCtype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>vue_02</title>
    <!-- 解除闪动 -->
    <style type="text/css">
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>{{1+3}}</div>
        <div v-clock>{{1+3}}</div>
        <!-- v-text也可以解决闪动 -->
        <!-- 这里具有响应式效果，在控制台输入vm.msg='qwe'会改变它的值 -->
        <!-- x-once:只会编译一次，不具有响应式，可以提高性能 -->
        <div v-text='msg'></div>
        <!-- v-html存在安全隐患，本网站内数据可以引用，来自第三方数据不可以引用 -->
        <div v-html='msg1'></div>
        <!-- v-pre用户显示原始的数据，不会自动解析 -->
        <div v-pre>{{1+9}}</div>
        <!-- 双向绑定使用v-model，当输入框中的值被改变时，数据data中的变量msg的值也会被改变-->
        <input type="text" v-model='msg'>
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                msg:"hello vue",
                msg1:"<h1>会自动解析</h1>"
            }
        });
    </script>
</body>

</html></SCRIPT>